<template>
  <div>
    <!-- 
      :props="props" 配置选项 具体看下表
      label 指定节点标签为对象的某个属性值
      chilren 指定子树为节点对象的某个值
      isLeaf	指定节点是否为叶子节点，仅在指定了 lazy 属性的情况下生效
      :load="loadNode" 加载子树数据的方法，仅当 lazy 属性为true 时生效 自动执行函数 -- 异步请求数据
      lazy	是否懒加载子节点，需与 load 方法结合使用
      show-checkbox	节点是否可被选择
      accordion	是否每次只打开一个同级树节点展开	

      node-click	节点被点击时的回调
    -->
    <el-tree
      :props="props"
      :load="loadNode"
      lazy
      accordion
      @node-click="nodeClick"
    ></el-tree>
  </div>
</template>

<script>
export default {
  data() {
    return {
      props: {
        label: "name",
        children: "zones",
        isLeaf: "leaf",
      },
    };
  },
  methods: {
    //点击tree获取数据
    nodeClick(data, ndoe) {
      console.log(data, ndoe);
      //传递数据给父组件
      this.$emit("sendTreeData", data);
    },
    // 自动调用 resolve 成功返回的接口 node 是节点
    loadNode(node, resolve) {
      //进入页面 获取第一层tree数据
      console.log("load--自动执行", node);
      // 0=级别 首先调用0开始 level
      if (node.level === 0) {
        // 进入界面 获取第一层的tree数据
        this.$api.getselectCategory().then(res => {
          // console.log(res.data);
          return resolve(res.data.result); // 修正重复的属性
        });
      }
      //请求的级别chilren
      if (node.level >= 1) {
        // this.$api.getselectCategory(cid.id.data)
        this.$api.getselectCategory({ type:node.data.cid }).then(res=> {
          console.log("二级的tree", res.data,{type:node.data.cid});
          // 请求当前的点击的tree的下面的数据
          //判断staus=200就调用result值
          if (res.data.status === 200) {
            return resolve(res.data.result); // 修正重复的属性
          } else {
            // 返回空数组
            return resolve([]);
          }
        });
      }
    },
    // loadNode(node, resolve) {
    //   console.log("node数据", node);
    //   if (node.level == 0) {
    //     this.$api.getselectCategory().then(res => {
    //       console.log("一级的数据res", res.data);
    //       return resolve(res.data.result);
    //     });
    //   }
    //   if (node.level == 1) {
    //     //  this.$api.getselectCategory({ id: node.data.type }).then(res => {
    //     this.$api.getselectCategory({ type: node.data.cid }).then(res => {
    //       console.log("二级数据", res.data.type);
    //       return resolve(res.data.result)
    //     });
    //   }
    // },
  },
};
</script>

<style lang="less" scoped>
/* 这里可以添加样式内容 */
</style>